var log = function(msg) {
	console.log(msg)
};

var Argus = function(id) {
	this.id = id;
	this.styleFill = "gray";
	this.styleStroke = "green";
	this.axisAngle = Math.PI / 6;
	this.axisAnglePercent = 0.01;
	this.axisAngleMinLength = 10;
	this.jArgus;
	this.canvas = null;
	this.ctx = null;
	this.leftMargin = 30;
	this.rightMargin = 20;
	this.topMargin = 20;
	this.bottomMargin = 20;
	this.canvasWidth = 0;
	this.canvasHeight = 0;
	this.axisX = 0;
	this.axisY = 0;
	this.minWidth = 320;
	this.minHeight = 200;
};

Argus.container = {};

Argus.fn = Argus.prototype = {
	init : function() {
		var id = this.id;
		log("argue.init:" + id);
		this.jArgus = $("#" + id);
		var jArgus = this.jArgus;
		this.canvas = document.getElementById(id);
		canvas = this.canvas;
		if (!canvas.getContext) {
			alert("Canvas is not supported by current browser!");
			return;
		}
		// setInterval("test", 3);
		jArgus.resizable({
			minWidth : this.minWidth,
			minHeight : this.minHeight,
			resize : this.onresize
		});
		jArgus.parent().draggable();
		this.resize();
		var container = Argus.container;
		if (container[id]) {
			log("Repeat argue instance " + id + ", container:" + container);
		} else {
			container[id] = this;
		}
		log("argue.init.end:" + id + ", container:" + container);
	},

	clear : function() {
	},

	onresize : function(event, ui) {
		var id = ui.originalElement[0].id;
		var container = Argus.container;
		if (container[id]) {
			var ags = container[id];
			ags.jArgus.attr("width", ui.size.width);
			ags.jArgus.attr("height", ui.size.height);
			ags.resize();
		} else {
			log("onresize, not recorgnized id: " + id);
		}
	},

	resize : function() {
		log("argue.resize:" + this.id);
		var canvas = this.canvas;
		this.canvasWidth = canvas.width, this.canvasHeight = canvas.height;
		this.ctx = canvas.getContext("2d");
		ctx = this.ctx;
		// init style
		ctx.fillStyle = this.styleFill;
		ctx.strokeStyle = this.styleStroke;
		// init transform
		var xorg = this.leftMargin;
		var yorg = this.canvasHeight - this.topMargin;
		ctx.setTransform(1, 0, 0, -1, xorg, yorg);
		this.refresh();
	},

	refresh : function(ctx) {
		log("argue.refresh:" + this.id);
		this.drawAxis();
		this.ctx.strokeRect(Math.random() * this.axisX, Math.random()
				* this.axisY, 2, 2);
		this.ctx.strokeRect(0, 0, 100, 50);
		// ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
	},

	drawAxis : function() {
		log("argue.drawAxis:" + this.id);
		this.axisX = this.canvasWidth - this.leftMargin - this.rightMargin,
				this.axisY = this.canvasHeight - this.topMargin
						- this.bottomMargin;
		var axisX = this.axisX;
		var axisY = this.axisY;
		var axisAngleLength = this.axisAnglePercent * axisX;
		if (axisAngleLength < this.axisAngleMinLength) {
			axisAngleLength = this.axisAngleMinLength;
		}
		var axisAngleCos = axisAngleLength * Math.cos(this.axisAngle);
		var axisAngleSin = axisAngleLength * Math.sin(this.axisAngle);
		var ctx = this.ctx;
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(axisX, 0);
		ctx.lineTo(axisX - axisAngleCos, axisAngleSin);
		ctx.lineTo(axisX, 0);
		ctx.lineTo(axisX - axisAngleCos, -axisAngleSin);
		ctx.moveTo(0, 0);
		ctx.lineTo(0, axisY);
		ctx.lineTo(-axisAngleSin, axisY - axisAngleCos);
		ctx.lineTo(0, axisY);
		ctx.lineTo(axisAngleSin, axisY - axisAngleCos);
		ctx.moveTo(0, 0);
		ctx.closePath();
		ctx.stroke();
	}
};
